<template>
  <div>
    <div class="setRuleWrap">
      <div class="table-title">
        <span>{{ tabTitle }}</span>
        <el-button type="primary" plain size="small" @click="addRuleInfo(null)">新建规则</el-button>
      </div>

      <div class="table-container">
        <el-table
          :data="scoresRuleList"
          border
          stripe
          size="mini"
          max-height="600px"
          style="width: 100%;">
          <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
          <el-table-column prop="name" label="课程/规则"></el-table-column>
          <el-table-column label="规则详细" width="520">
            <template slot-scope="scope">
              <span>开心 {{ scope.row.happy }};</span>
              <span>平静 {{ scope.row.calm }};</span>
              <span>消极 {{ scope.row.negative }};</span>
              <span>正坐 {{ scope.row.sitting }};</span>
              <span>趴着 {{ scope.row.prostrate }};</span>
              <span>站立 {{ scope.row.stand }};</span>
              <span>伸懒腰 {{ scope.row.stretch }};</span>
              <span>举手 {{ scope.row.raiseHands }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="addRuleInfo(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
              <el-button size="mini" type="text" @click="handleBatchProcess(scope.row)">批量应用</el-button>
            </template>
          </el-table-column>
        </el-table>

        <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
      </div>

      <AddRuleModel ref="AddRuleModelRef"></AddRuleModel>
      <BatchProcessModel ref="BatchProcessModelRef"></BatchProcessModel>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/pagination/Pagination";
import AddRuleModel from "../../components/setting/AddRuleModel";
import BatchProcessModel from "../../components/setting/BatchProcessModel";
import httpInterface from "../../utils/httpInterface";
import { errorMessage, successMessage } from "../../utils/validate";

export default {
  name: "ScoreRuleModal",
  data() {
    return {
      scoresRuleList: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
    }
  },
  components: {
    AddRuleModel, BatchProcessModel, Pagination
  },

  props: {
    tabTitle: String
  },

  methods: {
    indexMethod(index) {
      return index + 1;
    },

    // 添加规则
    addRuleInfo(row) {
      if (row == null) {
        this.$refs.AddRuleModelRef.show()
      } else {
        this.$refs.AddRuleModelRef.show(row.ruleId)
      }
    },

    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ruleId: row.ruleId
        };
        httpInterface.requestGet(httpInterface.URL_RULE_DELETE, params, res => {
          let { code } = res.data;
          if (code == 200) {
            this.getScoreRuleList();
            successMessage("删除成功！");
          } else {
            errorMessage("删除失败！");
          }
        }, null)
      }).catch(() => {});
    },

    // 批量处理
    handleBatchProcess(row) {
      this.$refs.BatchProcessModelRef.show(row.ruleId);
    },

    pageNumData(page) {
      this.pageData.pageNum = Number(page);
      this.getScoreRuleList();
    },

    pageSizeData(page) {
      this.pageData.pageSize = Number(page);
      this.getScoreRuleList();
    },

    getScoreRuleList() {
      let _this = this;
      let { pageData } = this;
      let params = {
        page: pageData.pageNum,
        size: pageData.pageSize
      };
      httpInterface.requestGet(httpInterface.URL_RULE_LIST, params, res => {
        let { code, body } = res.data;
        if (code == 200) {
          _this.scoresRuleList = body.rows.reverse();
          _this.pageData.total = Number(body.total);
        } else {
          errorMessage("记分规则数据加载失败！");
        }
      }, null)
    }
  }
}
</script>

<style scoped lang="scss">
.table-title {
  margin-top: -5px;
}

.table-container{
  margin-top: 20px;
}
</style>
